<template>
  <view class="hot-video-container">
    <!-- 1. 导入 mescroll-body -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <block v-for="(item, index) in videoList" :key="index">
        <view class="video-box">
          <hot-video-item :data="item" @click="onItemClick"></hot-video-item>
        </view>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
// 2. 导入 mixin
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { _getHotVideo } from '../../api/video'
export default {
  // 3. 注册 mixin
  mixins: [MescrollMixin],
  data() {
    return {
      pages: {
        page: 1,
        size: 10
      },
      videoList: [],
      init: true,
      mescroll: null
    }
  },
  created() {
    // this.getHotVideo()
    console.log('切换')
    uni.showModal({
      title: '提示',
      content: '因浏览器对视频解析问题，具体呈现效果可能会存在差异！'
    })
  },
  mounted() {
    this.mescroll = this.$refs.mescrollRef.mescroll
  },
  methods: {
    /**
     * 获取热门视频
     */
    async getHotVideo() {
      const { list } = await _getHotVideo(this.pages)
      if (this.pages.page === 1) {
        this.videoList = list
      } else {
        this.videoList = [...this.videoList, ...list]
      }
      console.log(list)
    },
    /**
     * 首次加载
     */
    async mescrollInit() {
      await this.getHotVideo()
      this.init = false
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess()
      console.log('mescrollInit')
    },
    /**
     * 上拉加载
     */
    async upCallback() {
      if (this.init) return
      this.pages.page += 1
      await this.getHotVideo()
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess()
      console.log('upCallback')
    },
    /**
     * 下拉刷新
     */
    async downCallback() {
      if (this.init) return
      this.pages.page = 1
      await this.getHotVideo()
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess()
      console.log('downCallback')
    },
    /**
     * 跳转到视频详情
     */
    onItemClick(data) {
      uni.navigateTo({ url: '/subpkg/pages/video-detail/video-detail' })
      this.$store.commit('video/setVideoDetail', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-video-container {
  background-color: $uni-bg-color-grey;
}
</style>
